import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { useNavigate } from 'react-router-dom'
import { FooterWrapper } from './style'
import IconMoreArrows from '@/assets/svg/icon_more_arrows'

const SelectionFooter = memo((props) => {
  const { name } = props

  let showMsg = '显示全部'
  if (name) {
    showMsg = `查看更多${name}房源`
  }
  
  const navigate = useNavigate()
  function moreClickHandle () {
    navigate('/entire')
  }

  return (
    <FooterWrapper color={name ? '#00848a' : '#000'}>
      <div className="info" onClick={e => moreClickHandle()}>
        <span className="msg">{showMsg}</span>
        <IconMoreArrows />
      </div>
    </FooterWrapper>
  )
})

SelectionFooter.propTypes = {
  name: PropTypes.string
}

export default SelectionFooter